<script setup lang="ts">
	import { ref, reactive } from 'vue';

	const activeName = ref('first');

	// Simulated data for coupons
	const coupons = reactive([
		{ price: 60, name: '每满440元减60元', desc: '2024.12.28—2024.12.28', isActive: false },
		{ price: 50, name: '每满300元减50元', desc: '2024.11.15—2024.11.30', isActive: false },
		{ price: 30, name: '每满200元减30元', desc: '2024.10.01—2024.10.15', isActive: false },
		{ price: 60, name: '每满440元减60元', desc: '2024.12.28—2024.12.28', isActive: false },
		{ price: 50, name: '每满300元减50元', desc: '2024.11.15—2024.11.30', isActive: false },
		{ price: 30, name: '每满200元减30元', desc: '2024.10.01—2024.10.15', isActive: false },
	]);

	function toggleActive(index : number) {
		coupons[index].isActive = !coupons[index].isActive;
	}
</script>
<template>
	<div class="bs-panel">
		<div class="bs-panel-body">
			<div class="bs-panel_hd">
				<div class="bs-panel_tt bold">优惠券</div>
			</div>
			<div class="co-main">
				<el-tabs v-model="activeName" class="cs-tabs">
					<el-tab-pane label="可使用" name="first">
						<el-row :gutter="20">
							<el-col :span="6" v-for="(coupon, index) in coupons" :key="index">
								<div class="coupon-card">
									<div class="coupon-card-body">
										<div class="coupon-price-left">
											<span class="coupon-price">{{ coupon.price }}</span>
											<span class="coupon-price-unit">元</span>
										</div>
										<div class="flex-col">
											<div class="coupon-name">{{ coupon.name }}</div>
											<div class="coupon-desc">{{ coupon.desc }}</div>
											<div class="coupon-btn">立即使用</div>
										</div>
									</div>
									<div :class="['coupon-card-footer', { 'active': coupon.isActive }]">
										<div class="flex-col">
											<div class="coupon-content">
												此满减优惠券仅适用于在指定域名预订和域名竞价过程中使用，用户在结算时需确保所选商品符合资格，且每个订单仅可使用一张优惠券，优惠券不可与其他优惠叠加使用，过期作废，请在有效期内及时使用。
											</div>
										</div>
										<el-icon @click="toggleActive(index)">
											<ArrowDown />
										</el-icon>
									</div>
								</div>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="已使用" name="second">
						<el-row :gutter="20">
							<el-col :span="6" v-for="(coupon, index) in coupons" :key="index">
								<div class="coupon-card coupon-card-disabled">
									<div class="coupon-card-body">
										<div class="coupon-price-left">
											<span class="coupon-price">{{ coupon.price }}</span>
											<span class="coupon-price-unit">元</span>
										</div>
										<div class="flex-col">
											<div class="coupon-name">{{ coupon.name }}</div>
											<div class="coupon-desc">{{ coupon.desc }}</div>
										</div>
									</div>
									<div :class="['coupon-card-footer', { 'active': coupon.isActive }]">
										<div class="flex-col">
											<div class="coupon-content">
												此满减优惠券仅适用于在指定域名预订和域名竞价过程中使用，用户在结算时需确保所选商品符合资格，且每个订单仅可使用一张优惠券，优惠券不可与其他优惠叠加使用，过期作废，请在有效期内及时使用。
											</div>
										</div>
										<el-icon @click="toggleActive(index)">
											<ArrowDown />
										</el-icon>
									</div>
									<div class="circle">已使用</div>
								</div>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="已失效" name="third">
						<el-row :gutter="20">
							<el-col :span="6" v-for="(coupon, index) in coupons" :key="index">
								<div class="coupon-card coupon-card-disabled">
									<div class="coupon-card-body">
										<div class="coupon-price-left">
											<span class="coupon-price">{{ coupon.price }}</span>
											<span class="coupon-price-unit">元</span>
										</div>
										<div class="flex-col">
											<div class="coupon-name">{{ coupon.name }}</div>
											<div class="coupon-desc">{{ coupon.desc }}</div>
										</div>
									</div>
									<div :class="['coupon-card-footer', { 'active': coupon.isActive }]">
										<div class="flex-col">
											<div class="coupon-content">
												此满减优惠券仅适用于在指定域名预订和域名竞价过程中使用，用户在结算时需确保所选商品符合资格，且每个订单仅可使用一张优惠券，优惠券不可与其他优惠叠加使用，过期作废，请在有效期内及时使用。
											</div>
										</div>
										<el-icon @click="toggleActive(index)">
											<ArrowDown />
										</el-icon>
									</div>
									<div class="circle">已失效</div>
								</div>
							</el-col>
						</el-row>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</div>
</template>
<style scoped lang='scss'>
	.co-main {
		padding: 0 20px;

		.el-row {
			padding: 15px;
		}
	}

	.coupon-card {
		position: relative;
		margin-bottom: 20px;

		.circle {
			position: absolute;
			right: 15px;
			bottom: 15px;
			width: 80px;
			height: 80px;
			transform: rotateZ(-25deg);
			border: 2px solid #666666;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18px;
			border-radius: 80px;
			font-weight: bold;
			color: #666666;
		}
	}

	.coupon-card-footer {
		display: flex;
		padding: 10px 15px;
		background-color: rgba(136, 136, 136, .8);
		border-radius: 0 0 5px 5px;
		color: #ddd;
	}

	.coupon-content {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.coupon-card-footer.active {
		.coupon-content {
			white-space: normal;
			text-overflow: unset;
		}
	}

	.coupon-card {
		border-radius: 4px;
		overflow: hidden;
		background-color: #fff;
	}

	.coupon-card-body {
		display: flex;
		align-items: center;
		color: #fff;
		padding: 15px;
		background-color: rgba(246, 138, 12, .8);
		border: none;
		border-radius: 5px 5px 0 0;
		min-height: 120px;

		.coupon-price-left {
			margin-right: 15px;
		}

		.coupon-price {
			font-size: 36px;
		}

		.coupon-price-unit {
			font-size: 20px;
		}
	}

	.coupon-card-body .coupon-name {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.coupon-card-body .coupon-desc {
		margin-bottom: 8px;
		font-size: 12px;
	}

	.coupon-btn {
		display: inline-flex;
		align-items: center;
		background-color: #fff;
		color: #666;
		border-radius: 4px;
		padding: 5px 10px;
		font-size: 12px;
		cursor: pointer;
	}

	.coupon-card-disabled {
		.coupon-card-body {
			background-color: rgba(204, 204, 204, 1);
		}

		.coupon-card-footer {
			background-color: #eeeeee;
		}
	}
</style>